<template>
	<view class="container">
		<!-- #ifdef MP-WEIXIN-->
		<view class="avatar xcx">
			<open-data type="userAvatarUrl"></open-data>
		</view>

		<view class="nickname">
			你好，<open-data class="nickname" type="userNickName"></open-data>
		</view>
		<!-- #endif -->

		<!-- #ifdef H5 || APP-PLUS-->
		<view class="avatar">
			<u-avatar :src="LoginUser.avatar_text" size="100" v-if="JSON.stringify(LoginUser) != '{}'">
			</u-avatar>
			<u-avatar v-else src="/static/avatar.jpg" size="100">
			</u-avatar>
		</view>

		<view class="nickname">
			你好，{{LoginUser.nickname}}
		</view>
		<!-- #endif -->

		<view v-if="LoginUser.openid" class="title">
			<text>解除绑定后，将无法使用「微信一键登录」。</text>
		</view>

		<view v-else class="title">
			<text>您暂未授权登录</text>
		</view>

		<u-button text="解除绑定" icon="pushpin" size="small" type="error" :customStyle="btnStyle" @click="wechat"
			v-if="LoginUser.openid" />
			
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				LoginUser: {},
				btnStyle:{
					width:'auto',
					height:'3em'
				},
			}
		},
		onLoad(){
			this.LoginUser = uni.getStorageSync('LoginUser') ? uni.getStorageSync('LoginUser') : {};
		},
		methods:{
			async wechat()
			{
				let result = await this.$u.api.admin.unbinding({id: this.LoginUser.id})
				if(result.code == 1){
					//#ifdef MP-WEIXIN
						uni.removeStorageSync('LoginUser')
					//#endif
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
						complete() {
							uni.switchTab({
								url: '/pages/admin/index'
							});
						}
					})
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: result.msg,
					})
				}
			}
		}
	}
</script>


<style>
	.container {
		height: 100%;
		margin: 0 80rpx;
		box-sizing: border-box;
	}

	.avatar {
		text-align: center;
	}

	.u-avatar {
		margin: 80rpx auto 40rpx;
	}

	.xcx {
		width: 200rpx;
		height: 200rpx;
		margin: 80rpx auto 40rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.nickname {
		font-size: 14px;
		text-align: center;
	}

	.title {
		text-align: center;
		margin: 40rpx 0;
		font-size: 14rpx;
	}

	.img-captcha {
		display: block !important;
	}

	.btn-submit {
		margin-top: 40rpx !important;
	}

	.href-bindmobile {
		margin-top: 40rpx;
		text-align: center;
		font-size: 14px;
		color: var(--color-primary);
	}

	.u-form .u-form-item__body__right__message {
		margin-left: 0px !important;
	}
</style>
